<template>
  <div>
    <div class="box">
      <p class="fb">发布宠物信息</p>
      <textarea
        name=""
        id="text"
        cols="30"
        rows="10"
        v-model="texts"
        placeholder="分享关于他的珍贵瞬间..."
      >
      </textarea>
      <button v-on:click="nei()" class="fabu"><span>发布</span></button>
      <ul class="img">
        <li v-for="(item, i) in msg" :key="i">
          <p class="text">{{ item.text }}</p>
          <p class="date">{{ item.date }}</p>
          <button v-on:click="shanchu" class="sc">删除</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      texts: "",

      msg: [
        {
          text: "请输入内容：",
          date: "请输入时间:",
        },
      ],
    };
  },
  methods: {
    // 删除当前的内容
    shanchu(index) {
      this.msg.splice(index, 1);
    },

    nei() {
      // date获取时间
      var date = new Date();
      // 做判断，如果用户输入内容为空，提醒他输入内容
      if (this.texts == "") {
        alert("请输入内容");
        return;
      }
      // 向后追加当前用户输入的内容
      this.msg.push({
        text: this.texts,
        // 获取当前日期
        date:
          date.getFullYear() +
          "-" +
          (date.getMonth() + 1) +
          "-" +
          date.getDate(),
      });
      // 输入完之后又为空
      this.texts = "";
    },
  },
};
</script>
<style lang="less">
ul {
  width: 350px;
}
.img li {
  width: 350px;
  margin-top: 10px;
  border: 3px solid gainsboro;
  background-color: lightsteelblue;
  background-image: url("../../img/dog.webp");
  background-repeat: no-repeat;
  background-size: 80px;
  background-position: 260px 0px;
}

.fb {
  width: 150px;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
}
textarea {
  width: 350px;
  height: 250px;
}
#text {
  font-size: 20px;
}
ul li p {
  font-size: 30px;
  font-weight: 2px;
}
button span {
  font-size: 20px;
  display: block;
  margin: 0 auto;
}
.fabu {
  margin-left: 290px;
  margin-top: 10px;
  width: 55px;
  height: 35px;
  border-radius: 8px;
}
.fabu span {
  font-size: 20px;
  font-weight: 2px;
  color: black;
}
.text {
  font-size: 20px;
  font-weight: 5px;
}
.date {
  font-size: 20px;
  font-weight: 5px;
}
.sc {
  width: 50px;
  height: 30px;
  border-radius: 5px;
  font-size: 15px;
  margin-top: 5px;
}
</style>
